<template>
    <view>
        <view :class="['button',props.size,{ transition, text: type === 'text' }]"
            :style="{ 'backgroundColor':props.bgColor, 'color':props.color, 'width':props.width, 'height':props.height, 'fontSize':props.fontSize, 'borderColor':props.borderColor, 'borderRadius': props.borderRadius, 'fontWeight':props.fontWeight, ...props.customStyles }"
            @click="handleClick">
            <view v-if="icon !== ''" class="fx" :class="[icon]" :style="{ fontSize }"></view>{{ title }}
        </view>
    </view>
</template>

<script setup lang="ts">
    import { withDefaults, defineProps } from "vue";
    import {
        ButtonProps,
    } from '@/props.ts';
    const props = withDefaults(defineProps<ButtonProps>(), {
        size: 'normal',//normal、large，small，mini
        bgColor: "#fff",
        title: "",
        borderRadius: '10rpx',
        color: '#000',
        borderColor: undefined,
        width: undefined,
        height: undefined,
        fontWeight: 'normal',
        icon: "",
        transition: false,
        customStyles: () => ({})

    })

    const emit = defineEmits<{
        (e : 'click') : void;
    }>();

    const handleClick = () => {
        emit('click');
    };
    // let str : number | string;
    // (str! as string).charCodeAt(0);
</script>

<style lang="scss">
    .button {
        @include flex-center;
        padding: 0 20rpx;
        box-sizing: border-box;
    }

    .normal {
        height: 65rpx;
        width: 100%;
        font-size: 26rpx;
    }

    .mini {
        width: 140rpx;
        height: 50rpx;
        font-size: 24rpx;
    }

    .text {
        background: transparent !important;
    }

    .transition {
        @include linear-gradient(to right, $button-transition-color1, $button-transition-color2);
    }

    .fx {
        padding-right: 15rpx;
    }
</style>